【vue2+echarts】关系图谱的使用（节点点击事件、根节点使用图片）

2024-07-06 10:25| 来源: 网络整理| 查看: 265

前言

需要实现一种类似思维导图、拓扑图的功能主要的需求是：数据中心分布、共三层数据（不同的样式）、数据可以点击跳转、节点使用虚线连接

方案选型 jsmind–pass:思维导图，样式比较简单，属于比较标准的思维导图。可参考的文章在vue中使用jsmind组织架构或思维导图，初级的使用。d3v6（vue+d3v6的一个实践Blog）–pass:

由于 d3data 更加灵活，需要编写较多的自定义代码，所以对于数据可视化需求比较特殊和复杂的场景来说，d3data 更适用。——from chatgpt

relation-group:专门的关系图谱库。上面的链接是demo,github链接不足：1、不能设置线条为虚线？优点：1、实现比较简单。有可视化的配置选项。例子：关系图谱relation-graph 使用心得:一个比较完整的思维导图的案例。echarts功能更全，主要是可以直接设置线型为虚线最简单的关系图demo&实现基础的封装vue-echart组件：非常详细&有完整代码，100分！有vue2和vue3的案例。节点点击事件

echarts关系图节点点击事件重点就是获取图表，进行监听。

this.myChart = echarts.init(document.getElementById('main')); this.myChart.on('click', function (param) { if (param.dataType == 'node') { console.log('点击了节点',param) } else { console.log('点击了边',param) } });

echarts力导向图区分鼠标点击事件与拖拽事件（angularjs）这个是区分了点击和拖拽事件，用来扩展，目前没使用到。

根节点使用图片 methods: { setOption: function () { let option = { // ... series: [ { type: "graph", // ... categories: this.categories, data: this.echartsData?.data.map((node) => { if (node.category === 0) { return { ...node, // 设置根节点的图片属性 symbol: `image://${node.book_cover}`, symbolSize: [100, 100], // 设置图片大小为 100x100 label: { show: false, // 不显示标签 }, }; } else { return node; } }), // ... }, ], }; // ... return option; },

参考：vue项目中如何使用echarts引入png图片或者图标(二者均为symbol标识) 这个项目中的效果挺好的。比较详细讲了image://的用法

【本文地址】

公司简介

联系我们